<!-- 官网首页，分为5个部分，20周年、课题组介绍、成员介绍、数据统计、通知简讯 -->
<template>
  <header class="header">
    <div class="header-container">
      <h1 class="logo">ipss课题组</h1>

      <div></div>
      <div class="login-btn-container">
        <button id="loginBtn" class="login-btn" @click="$router.push('/login')">
          成员登录
        </button>
        <!-- <img
          src="/images/emoticon/3.gif"
          alt="表情包"
          style="
            width: 80px;
            height: auto;
            margin-left: 10px;
            border-radius: 10px;
            border: none;
          "
        /> -->
      </div>
    </div>
  </header>

  <main class="main-content">
    <!-- 顶部标签导航 -->
    <div class="tabs">
      <div class="tab-btns">
        <button
          v-for="tab in tabs"
          :key="tab.id"
          class="tab-btn"
          :class="tab.id === activeTab ? 'active' : ''"
          @click="changeTab(tab.id)"
        >
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- 标签内容区域 -->
    <div style="background-color: #f9fafb">
      <div v-show="activeTab === 'anniversary'" class="tab-content">
        <TheTwentieth />
      </div>
      <div v-show="activeTab === 'team'" class="tab-content">
        <ResearchGroup />
      </div>
      <div v-show="activeTab === 'members'" class="tab-content">
        <MemberIntroduction />
      </div>
      <div v-if="activeTab === 'data'" class="tab-content">
        <DataStatistics />
      </div>
      <div v-show="activeTab === 'notifications'" class="tab-content">
        <RecentAnnouncements />
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-column">
        <h3 class="footer-title">ipss课题组</h3>
        <p class="footer-text">
          致力于智能制造工程和工业工程领域的研究与人才培养，庆祝胡老师执教20周年。
        </p>
      </div>
      <div class="footer-column">
        <h3 class="footer-title">联系方式</h3>
        <p class="footer-text">地址：北京理工大学机械与车辆学院</p>
        <p class="footer-text">电话：15191304929</p>
        <p class="footer-text">邮箱：1022835493@qq.com</p>
      </div>
      <div class="footer-column">
        <h3 class="footer-title">关注我们</h3>
        <div class="social-icons">
          <a href="#" class="social-icon">
            <i class="fa-brands fa-weixin"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="fa-brands fa-weibo"></i>
          </a>
          <a href="#" class="social-icon">
            <i class="fa-brands fa-github"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2025 ipss课题组 - 胡老师执教20周年纪念网站</p>
    </div>
  </footer>
</template>

<script setup>
import RecentAnnouncements from "@/components/RecentAnnouncements.vue";
import ResearchGroup from "@/components/ResearchGroup.vue";
import TheTwentieth from "@/components/TheTwentieth.vue";
import MemberIntroduction from "@/components/MemberIntroduction.vue";
import DataStatistics from "@/components/DataStatistics.vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

// 使用 ref 创建响应式数据
const activeTab = ref("anniversary");

// 标签数组定义
const tabs = [
  { id: "anniversary", label: "20周年纪念" },
  { id: "team", label: "课题组概况" },
  { id: "members", label: "课题组成员" },
  { id: "data", label: "数据统计" },
  { id: "notifications", label: "通知简讯" },
];
const route = useRoute();
const tabFromQuery = route.query.tab_active; // 获取查询参数 tab_active

// 在组件挂载时，检查是否有传递 tab_active 的查询参数
onMounted(() => {
  if (tabFromQuery) {
    activeTab.value = tabFromQuery; // 如果有参数，优先激活该标签
  }
});

// 切换标签函数
const changeTab = (tabId) => {
  activeTab.value = tabId;
};
</script>

<style scoped>
/* Header */
.header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 32px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e40af;
}

.login-btn-container {
  display: flex;
  align-items: center;
}

.login-btn {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: #1d4ed8;
}

/* Main Content */
.main-content {
  margin-top: 24px;
  padding: 16px 32px;
}

.tabs {
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.tab-btns {
  display: flex;
  overflow-x: auto;
  padding-bottom: 8px;
}

.tab-btn {
  border: none;
  padding: 12px 24px;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-right: 16px;
  cursor: pointer;
}

.tab-btn.active {
  background-color: #2563eb;
  color: white;
}

.tab-content {
  padding: 16px 100px;
}

/* Footer */
.footer {
  background-color: #1f2937;
  color: white;
  padding: 48px 32px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}

.footer-column {
  padding-bottom: 16px;
}

.footer-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.footer-text {
  color: #d1d5db;
  margin-bottom: 8px;
}

.social-icons {
  display: flex;
  gap: 16px;
}

.social-icon {
  color: #d1d5db;
  font-size: 24px;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: white;
}

.footer-bottom {
  border-top: 1px solid #374151;
  margin-top: 32px;
  padding-top: 16px;
  text-align: center;
  color: #6b7280;
}
</style>
